<!--场景应用金融产品-->
<template>
  <div class="financialProduct">
    <el-form :inline="true" class="demo-form-inline" size="small">
      <el-form-item label="金融产品：">
        <el-select v-model="financialProductId">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option
            v-for="item in productList"
            :label="item.productTypeName"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务场景：">
        <el-select v-model="businessScene">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option label="新房" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场景金融名称：">
        <el-input v-model="financialSceneName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="fn('add')" size="small">新增</el-button>
    <el-table :data="tableData" border style="margin-top: 20px;">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="financialSceneName" label="场景金融名称"></el-table-column>
      <el-table-column prop="businessSceneName" label="业务场景"></el-table-column>
      <el-table-column prop="financialProductName" label="金融产品"></el-table-column>
      <el-table-column prop="lineofCredit" label="授信额度（元）"></el-table-column>
      <el-table-column prop="availableCredit" label="可用额度（元）"></el-table-column>
      <el-table-column prop="amountUsed" label="已用额度（元）">
          <template slot-scope="scope">
              <router-link :to="{name: 'fundUse',params:{value:{
              productType: scope.row.productType,
              businessScene:scope.row.businessScene,
              financialSceneName:scope.row.financialSceneName,
              ebillAuditStatus:1
              }}}" v-if="scope.row.amountUsed>0">{{scope.row.amountUsed}}</router-link>
              <span v-else>{{scope.row.amountUsed}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="freezingAmount" label="冻结额度（元）">
          <template slot-scope="scope">
              <router-link :to="{name: 'fundUse',params:{value:{
              productType: scope.row.productType,
              businessScene:scope.row.businessScene,
              financialSceneName:scope.row.financialSceneName,
              fundUseStatus:2
              }}}" v-if="scope.row.freezingAmount>0">{{scope.row.freezingAmount}}</router-link>
              <span v-else>{{scope.row.freezingAmount}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="applyRoleName" label="适用角色"></el-table-column>
      <el-table-column prop="availableCycle" label="可用周期（天）"></el-table-column>
      <el-table-column prop="interestRate" label="执行利率%"></el-table-column>
      <el-table-column prop="interestRateMethodName" label="利率承担方式"></el-table-column>
      <el-table-column prop label="承担详情">
        <template slot-scope="scope">
          <span
            v-for="(item,idx) in scope.row.sceneRates"
            v-if="item.able"
            class="sceneRateSpan"
          >{{item.applyRoleName}}承担{{item.shareInterestRate}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="operatorName" label="操作人"></el-table-column>
      <el-table-column prop="updateTime" label="操作时间"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="fn('view',scope.row)">查看</el-button>
          <el-button
            type="text"
            @click="fn('edit',scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            @click="fn('delete',scope.row)"
            :disabled="!(scope.row.amountUsed==0&&scope.row.freezingAmount==0)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next,jumper"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import TimeComp from "@/components/common/timeComp";
export default {
  name: "financialProduct",
  title: "场景应用金融产品",
  created() {
    this.defultSearch();
    this.searchList();
    this.loadProductList();
  },
  activated() {
    this.defultSearch();
    this.searchList();
  },
  mounted() {},
  components: { TimeComp },
  data() {
    return {
      financialProductId: undefined,
      businessScene: undefined,
      financialSceneName: "",
      productList: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalSize: 0
    };
  },
  methods: {
    loadProductList() {
      this.$axios
        .post("/financialCenter/financeProduct/list", {
          pageNum: 1,
          pageSize: 999
        })
        .then(res => {
          this.productList = res.list;
        });
    },
    fn(type, row) {
      if (type == "add") {
        this.$router.push({
          path: "/financialProductAdd",
          query: { type: "add" }
        });
      } else if (type == "view") {
        this.$router.push({
          path: "/financialProductView",
          query: { id: row.id }
        });
      } else if (type == "edit") {
          let special
          if(row.amountUsed==0&&row.freezingAmount==0){
              special = false
          }else{
              special = true
          }
        this.$router.push({
          path: "/financialProductAdd",
          query: { type: "edit", id: row.id, special}
        });
      } else if (type == "delete") {
        this.$confirm("确定要删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$axios
              .post("/financialCenter/financeProduct/scene/delete/" + row.id)
              .then(() => {
                this.$message.success("删除成功");
                this.searchList();
              });
          })
          .catch(() => {});
      }
    },
    searchList() {
      let param = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        financialProductId: this.financialProductId,
        businessScene: this.businessScene,
        financialSceneName: this.financialSceneName
      };
      this.tableData = [];
      this.totalSize = 0;
      this.$axios
        .post("/financialCenter/financeProduct/scene/list", param)
        .then(res => {
          this.tableData = res.list;
          this.totalSize = res.total;
        });
    },
    // 分页器改变页码
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList();
    },
    defultSearch() {
      let { params } = this.$route;
      if (params && params.type == "search") {
        for (let key in params.value) {
          let val = params.value[key];
          this[key] = val;
          console.log(key, val);
        }
      }
    }
  },
  computed: {}
};
</script>
<style lang="stylus" scoped>
.financialProduct {
  .sceneRateSpan {
    &:after {
      content: ', ';
    }

    &:last-child {
      &:after {
        content: '';
      }
    }
  }
}
</style>
